<template>
  <div class="tab-nav" ref="jtabnav">
      <slot name="tabcontent">
        <ul v-if="items.length && range.length">
          <li v-for="(item,index) in range"
              :key="index"
              :class="['tab-alink',(item.num && Number(item.num)) ? '' : 'cursor gray' ,{tabk:item.flag}]"
              @click="jump(item.num,item.offsetTop,item)">
            <span>
              {{item.name}}({{item.num}})
            </span>
          </li>
        </ul>
        <ul v-else>
          <li class="tab-alink gray cursor">
            {{message}}
          </li>
        </ul>
      </slot>
  </div>
</template>
<script>
export default {
  name: 'jTabNav',
  props: {
    items: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      curIndex: 0,
      wrapTop:[],
      message:'加载中，请稍后...'
    }
  },
  computed: {
    range() {
      this.wrapTop = this.items.sort((a, b) => a.idx-b.idx)
      return this.wrapTop
    }
  },
  methods: {
    toScroll(params) {
      document.body.scrollTop = params.offsetTop || 0
      document.documentElement.scrollTop = params.offsetTop || 0
    },
    jump(num, top, list) {
      // let lists = this.range
      // lists.map(item => {
      //   item.flag = false
      // })
      // list.flag = true
      let offsetTop, params
      let partPath1 = this.$route.path.split('#')[0].split('/')[1]
      let partPath2 = this.$route.path.split('#')[0].split('/')[2]
      top = top || 0
      if (partPath1 === 'clibdetail') {
        if (!num || !Number(num)) {
          offsetTop = 0
        } else {
          if (partPath2 === 'baseinfoa') {
            offsetTop = top - 300
          } else if (partPath2 === 'InProperty') {
            offsetTop = top - 280
          } else if (partPath2 === 'riskInformations') {
            offsetTop = top - 310
          } else if (partPath2 === 'operationState') {
            offsetTop = top - 400
          } else {
            offsetTop = 0
          }
        }
      } else if (partPath1 === 'entdetail') {
        if (!num || !Number(num)) {
          offsetTop = 450
        } else {
          if (partPath2 === 'riskrelation') {
            offsetTop = top + 500
          } else {
            offsetTop = top - 370
          }
        }
      }
      params = {
        offsetTop
      }
      this.toScroll(params)
    }
  },
  destroyed() {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.tab-nav{
    width: 1356px;
    // -webkit-font-smoothing: antialiased;
    background: #fff;
    padding: 2px;
    perspective: 100px;
    display: table;
    // height: 40px;
    line-height: 40px;
    position: sticky;
    position: -webkit-sticky;
    -webkit-font-smoothing: subpixel-antialiased;
    z-index: 200;
    top:128px;
    // top:129px;
    z-index: 2;
    margin-left: -40px;
    ul {
      width: 100%;
      // -webkit-font-smoothing: antialiased;
      -webkit-font-smoothing: subpixel-antialiased;
      background: #fff;
      // height: 40px;
      line-height: 40px;
      z-index: 200;
    }
  .tab-alink {
    display: inline-block;
    // -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    color: #069bf7;
    padding: 0px 34px;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    margin-top: 10px;
    z-index: 200;
    height: 20px;
    // width: 200px;
    line-height: 20px;
    &:hover,
    &.selected,
    &:visited {
      color: #fff !important;
      background: #069bf7 !important;
      z-index: 200;
    }
    span {
      -webkit-font-smoothing: antialiased;
      opacity: 1;
      -webkit-transform: translateZ(0) scale(1.0, 1.0);
      display: inline-block;
      display: table;
      height: 20px;
      font-size: 12px;
      width: 120px;
      text-align: center;
      line-height: 20px;
      z-index: 200;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity:1;
      z-index: 10000;
    }
  }
  .tabk {
    color: #fff !important;
    background: #069bf7 !important;
  }
  .gray {
    color: rgb(153,153,153) !important;
  }
  .cursor{
    cursor:no-drop;
  }
}
.floatbar,
.floatbar1 {
  position:fixed;
  left:0;
  right:0;
  margin:0 auto;
  background: #fff;
  z-index: 1
}
.floatbar {
  top:123px;
}
.floatbar1 {
  top:50px;
}
</style>



// WEBPACK FOOTER //
// src/components/jTabNav.vue